<template>
    <div class="photoin_container">
        <h3 class="title">{{ infoData.title }}</h3>
        <p class="subtitle">
            <span>发表时间：{{ infoData.add_time }} </span>
            <span>点击量： {{ infoData.hits }}次</span>
        </p>

        <!-- 缩略图区域 -->
            <div class="Thumbs">
                <vue-preview :slides="list" @close="handleClose"></vue-preview>
            </div>

        <!-- 内容区域 -->
        <div class="content">
            <div v-html="infoData.content"></div>
        </div>

        <!-- 导入评论子组件 -->
        <commentsBox :id="id"></commentsBox>
    </div>
</template>

<script>
// 导入评论子组件
import comments from "../subcomponents/comment.vue";

export default {
  data() {
    return {
      id: this.$route.params.id, // 从路由获取到的图片 id
      infoData: {}, // 图片详情
      list: [] // 缩略图数组
    };
  },
  methods: {
    getPhotoInfo() {
      this.$http
        .jsonp(
          '?s=App.Table.FreeFindOne&model_name=imgList&where=[["id","="," ' +
            this.id +
            ' "]]&app_key=4F07D528AB07EE72BD7F7C9263BD6705'
        )
        .then(result => {
          if (result.body.ret === 200) {
            // console.log(result.body)
            this.infoData = result.body.data.data;
          } else {
            Toast("获取数据出错");
          }
        });
    },
    getThumbs() {
      // 获取缩略图
      this.$http
        .jsonp(
          '?s=App.Table.FreeQuery&model_name=imgList&where=[["id", "=", ' +
            this.id +
            "]]&app_key=4F07D528AB07EE72BD7F7C9263BD6705"
        )
        .then(result => {
          if (result.body.ret === 200) {
            console.log(result);
            // 循环每个图片数据， 补全图片的宽和高
            result.body.data.list.forEach(item => {
              item.w = 640;
              item.h = 960;
              item.src = item.url;
              item.msrc = item.url;
            });
            // 把完整数据保存到 list 中
            this.list = result.body.data.list;
          }
        });
    },
    handleClose() {
      console.log("close event");
    }
  },
  components: {
    commentsBox: comments
  },
  created() {
    this.getPhotoInfo();
    this.getThumbs();
  }
};
</script>

<style lang="less">
.photoin_container {
  background-color: #fff;
  .title {
    padding-top: 20px;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    margin: 0;
  }
  .subtitle {
    margin: 0 10px;
    font-size: 12px;
    margin-top: 10px;
    color: #226aff;
    display: flex;
    justify-content: space-between; //两端对齐
  }

  .content {
    border-top: 1px solid #e5e5e5;
    margin-top: 10px;
    padding: 20px;
    img {
      width: 100%;
    }
  }
  .Thumbs {
    a {
      img {
        width: 30%;
      }
    }
  }
}
</style>
